<template>
  <view class="main">

    <view class="content">
      <view class="top">
        <view class="top-box">
          <view>
            <view class="title dispaly-center">
              <view class="ipt">
                <view class="ip-box">
                  <view class="ip-bg">
                    <image src="/static/icon/s.png" mode="aspectFill"/>
                  </view>
                  <view class="input dispaly-center">
                    <view class="s-icon">
                      <image src="/static/image/search.png" mode="aspectFill"/>
                    </view>
                    <input placeholder="搜索"/>
                  </view>
                </view>
              </view>
            </view>
            <view class="cate">
              <view class="cate-box">
                <view class="cate-img">
                  <image src="/static/image/sort-bg.png" mode="aspectFill"/>
                </view>
                <view class="sort">
                  <view class="sort-item dispaly-center" v-for="(item, index) in sortList" :key="index" @click="screening(item, index)">
                    <view class="s dispaly-center">
                      <view class="s-left" v-if="item.type == 4">{{ JSON.stringify(screeningItem) != '{}' ? screeningItem.name : '筛选' }}</view>
                      <view class="s-left" v-else>{{ item.name }}</view>
                      <view class="s-right">
                        <image v-if="item.type == 4" src="/static/icon/sx.png" mode="aspectFill"/>
                        <image v-else src="/static/image/sort.png" mode="aspectFill"/>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="product" :style="{marginTop: cateHeight + 'px'}">
        <ProductList list-type="2"/>
      </view>
    </view>
  </view>
  <view class="s-box" v-if="show" :style="{top: cateHeight + 'px'}">
    <view class="item-box dispaly-just-between">
      <view class="item" v-for="(item, index) in screeningList" :key="index" @click="clickScreening(item, index)">
        <view class="b-txt dispaly-align-center" style="color: #FFD257 " @click="buy">{{item.name}}</view>
        <image src="/static/icon/buy.png" mode="aspectFill"/>
      </view>
    </view>
  </view>
  <up-overlay zIndex="1" :show="show" @click="show = false"></up-overlay>
</template>

<script setup>
import ProductList from "../../components/productList/productList.vue";
import {getElementHeight} from '@/utils/util'
import {ref, onMounted} from 'vue';

const show = ref(false)

const sortList = ref([
  {name: '时间', type: 1},
  {name: '价格', type: 2},
  {name: '收藏', type: 3},
  {name: '筛选', type: 4},
])

const screeningList = ref([
  {name: '年级', 'type': 'class'},
  {name: '专业', 'type': 'zy'}
])

// 选择筛选
const screeningItem = ref({})
const clickScreening = (item, index) => {
  screeningItem.value = item
  show.value = false
}

const screening = (item, index) => {
  show.value = item.type == 4 ? true : false
}
// 获取元素高度
const cateHeight = ref(0)
onMounted(async () => {
  const res = await getElementHeight('.top')
  cateHeight.value = res
})
</script>

<style lang="scss" scoped>
$i-height: 68rpx;
$i-width: 692rpx;
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffbf0f;
}

.s-box {
  z-index: 9999;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffbf0f;
  padding: 20rpx 0;
  .item-box {
    padding: 18rpx 26rpx 0 26rpx;
    .item {
      position: relative;
      width: 330rpx;
      height: 80rpx;
      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 330rpx;
        height: 80rpx;
      }
      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #000000;
        width: 330rpx;
        height: 80rpx;
      }
    }
  }
}

.title {
  display: flex;
  justify-content: center;
  .ipt {
    .ip-box {
      position: relative;
      width: $i-width;
      height: $i-height;

      .ip-bg {
        image {
          width: $i-width;
          height: $i-height;
        }
      }

      .input {
        width: $i-width;
        height: $i-height;
        position: absolute;
        top: 0;
        left: 24rpx;

        .s-icon {
          height: $i-height;
          line-height: $i-height;
          padding-top: 5rpx;
          margin-right: 10rpx;

          image {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}

.content {
  .cate {
    padding: 13rpx 22rpx;

    .cate-box {
      position: relative;

      .cate-img {
        image {
          width: 100%;
          height: 78rpx;
        }
      }

      .sort {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 20%;
        right: 40rpx;

        .sort-item:last-child {
          margin-right: 0;
        }

        .sort-item {
          margin-right: 60rpx;

          .s {
            .s-left {
              font-family: IPix;
              font-size: 28rpx;
              color: #4E3B0C;
              margin-right: 10rpx;
            }

            .s-right {
              image {
                width: 22rpx;
                height: 30rpx;
              }
            }
          }
        }
      }
    }
  }
}


</style>